<route lang="yaml">
meta:
enabled: false
</route>

<script setup lang="ts">
import api from '@/api/modules/opus'
import apiUser from '@/api/modules/useranks'
import { watch } from 'vue'
import { useRoute } from 'vue-router'

defineOptions({
  name: 'PagesExampleMenuList',
})
const { pagination, getParams, onSizeChange, onCurrentChange } = usePagination()

// const router = useRouter()

// 表格是否自适应高度
const tableAutoHeight = ref(false)

// 列表
const loading = ref(false)
const dataList = ref([])
const route = useRoute()

watch(
  () => route.query.timestamp,
  () => {
    if (route.name === 'PagesExampleMenuList') {
      getDataList()
    }
  },
)
onMounted(() => {
  loadSchoolOptions()
  getDataList()
})
const schoolOptions = ref<SchoolOption[]>([]) // 加载学校列表
interface SchoolOption {
  label: string
  value: number
}
// 查询学校列表
async function loadSchoolOptions() {
  try {
    const res = await apiUser.getSchoolList()
    schoolOptions.value = res.data.map((item: any) => ({
      label: item.schoolName,
      value: item.schoolId,
    }))
  }
  catch (error) {
    console.error('加载失败', error)
  }
}
// 搜索
const searchDefault = {
  nickName: '',
  schoolName: '',
  phonenumber: '',
}
const search = ref({ ...searchDefault })
function searchReset() {
  Object.assign(search.value, searchDefault)
}

function getDataList() {
  loading.value = true
  const params = {
    nickName: search.value.nickName,
    schoolName: search.value.schoolName,
    phonenumber: search.value.phonenumber,
    ...(getParams()),
  }
  api.designerlist(params).then((res: any) => {
    loading.value = false
    dataList.value = res.data
    pagination.value.total = res.total
  })
}

// function onEdit(row: any) {
//   router.push({
//     name: 'designerEdit',
//     params: {
//       id: row.userId,
//     },
//   })
// }

// 每页数量切换
function sizeChange(size: number) {
  onSizeChange(size).then(() => getDataList())
}

// 当前页码切换（翻页）
function currentChange(page = 1) {
  onCurrentChange(page).then(() => getDataList())
}

// 格式化手机号码
const formatPhoneNumber = (phoneNumber: string): string => {
  if (!phoneNumber || phoneNumber.length !== 11) {
    return phoneNumber
  }
  return `${phoneNumber.slice(0, 3)}****${phoneNumber.slice(7)}`
}
</script>

<template>
  <div :class="{ 'absolute-container': tableAutoHeight }">
    <FaPageHeader title="设计师管理" class="mb-0" />
    <FaPageMain :class="{ 'flex-1 overflow-auto': tableAutoHeight }" :main-class="{ 'flex-1 flex flex-col overflow-auto': tableAutoHeight }">
      <FaSearchBar :show-toggle="false">
        <template #default="{ fold }">
          <ElForm :model="search" size="default" label-width="100px" inline-message inline class="search-form">
            <ElFormItem v-if="fold" label="昵称">
              <ElInput v-model="search.nickName" placeholder="请输入用户昵称" clearable @keydown.enter="currentChange()" @clear="currentChange()" />
            </ElFormItem>
            <ElFormItem v-auth="'system:school:select'" label="学校">
              <el-select v-model="search.schoolName" style="width: 150px" filterable placeholder="请选择学校">
                <el-option
                  v-for="item in schoolOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </ElFormItem>
            <ElFormItem v-if="fold" label="手机号">
              <ElInput v-model="search.phonenumber" placeholder="请输入手机号" clearable @keydown.enter="currentChange()" @clear="currentChange()" />
            </ElFormItem>
            <ElFormItem>
              <ElButton @click="searchReset(); currentChange()">
                重置
              </ElButton>
              <ElButton v-auth="'system:designer:list'" type="primary" @click="currentChange()">
                <template #icon>
                  <FaIcon name="i-ep:search" />
                </template>
                筛选
              </ElButton>
            </ElFormItem>
          </ElForm>
        </template>
      </FaSearchBar>
      <ElDivider border-style="dashed" />
      <FaPageMain :class="{ 'flex-1 overflow-auto': tableAutoHeight }" :main-class="{ 'flex-1 flex flex-col overflow-auto': tableAutoHeight }">
        <ElTable v-loading="loading" class="mt-4" :data="dataList" row-key="id" stripe highlight-current-row default-expand-all border height="100%">
          <ElTableColumn prop="nickName" label="用户" />
          <ElTableColumn label="手机号码" show-overflow-tooltip>
            <template #default="{ row }">
              {{ formatPhoneNumber(row.phonenumber) }}
            </template>
          </ElTableColumn>
          <ElTableColumn prop="schoolName" label="所属学校" show-overflow-tooltip />
        </ElTable>
        <ElPagination style="margin-top: 20px" :current-page="pagination.page" :total="pagination.total" :page-size="pagination.size" :page-sizes="pagination.sizes" :layout="pagination.layout" :hide-on-single-page="false" class="pagination" background @current-change="currentChange" @size-change="sizeChange" />
      </FaPageMain>
    </fapagemain>
  </div>
</template>

<style scoped>
.absolute-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
</style>
